<template>
  <A>
    <div class="a">我是A组件</div>
    <div class="cal">动态css</div>
    <div :class="fu.bor">动态class</div>
  </A>
  <div class="w-screen h-screen bg-red-600 flex justify-center items-center text-8xl text-slate-200">
    tailwindCSs
  </div>
  <div class="fuheng m-10">
    unoCss
  </div>
  <div flex red m="10" class="i-twemoji-bomb">

  </div>
  <!-- <iframe src="https://www.jianshu.com/p/0ddeb9fb8394" frameborder="0"></iframe> -->
</template>
<script setup lang='ts'>
import { useCssModule } from 'vue'
import A from '@/components/cssNEwCom/index.vue';
const style = ref({
  color: 'blue'
})
//获取css对象
const css = useCssModule('fu')
console.log(css)
setTimeout(() => {
  style.value.color = 'black'
}, 2000)
</script>
<style module="fu">
.bor {
  border: 1px solid #000;
}
</style>
<style scoped lang='less'>
.cal {
  color: v-bind('style.color');
}

:global(div) {
  //全局选择器
  color: pink;
}
</style>    